<sa-widget [colorbutton]="false" [editbutton]="false">

  <header>
    <span class="widget-icon"> <i class="fa fa-map-marker"></i> </span>

    <h2>Birds Eye</h2>

    <div class="widget-toolbar hidden-mobile">
      <on-off-switch ><i class="fa fa-location-arrow"></i> Realtime</on-off-switch>
    </div>
  </header>

  <div>
    <div class="widget-body no-padding">
      <d3-map [data]="data"></d3-map>

      <div id="heat-fill">
        <span class="fill-a">0</span>

        <span class="fill-b">5,000</span>
      </div>
        <table saSparklineContainer class="table table-striped table-hover table-condensed">
          <thead>
          <tr>
            <th>Country</th>
            <th>Visits</th>
            <th class="text-align-center">User Activity</th>
            <th class="text-align-center">Online</th>
            <th class="text-align-center">Demographic</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td><a (click)="(null)">USA</a></td>
            <td>4,977</td>
            <td class="text-align-center">
              <div class="sparkline txt-color-blue text-align-center"
                   data-sparkline-height="22px" data-sparkline-width="90px"
                   data-sparkline-barwidth="2">
                2700, 3631, 2471, 1300, 1877, 2500, 2577, 2700, 3631, 2471,
                2000, 2100, 3000
              </div>
            </td>
            <td class="text-align-center">143</td>
            <td class="text-align-center">
              <div class="sparkline display-inline" data-sparkline-type='pie'
                   data-sparkline-piecolor='["#E979BB", "#57889C"]'
                   data-sparkline-offset="90" data-sparkline-piesize="23px">
                17,83
              </div>
              <div
                class="btn-group display-inline pull-right text-align-left hidden-tablet"
                data-dropdown>
                <button class="btn btn-xs btn-default dropdown-toggle">
                  <i class="fa fa-cog fa-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-xs pull-right">
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i>
                      <u>P</u>DF</a>
                  </li>
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-times fa-lg fa-fw txt-color-red"></i>
                      <u>D</u>elete</a>
                  </li>
                  <li class="divider"></li>
                  <li class="text-align-center">
                    <a (click)="(null)">Cancel</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td><a (click)="(null)">Australia</a></td>
            <td>4,873</td>
            <td class="text-align-center">
              <div class="sparkline txt-color-blue text-align-center"
                   data-sparkline-height="22px" data-sparkline-width="90px"
                   data-sparkline-barwidth="2">
                1000, 1100, 3030, 1300, -1877, -2500, -2577, -2700, 3631, 2471,
                4700, 1631, 2471
              </div>
            </td>
            <td class="text-align-center">247</td>
            <td class="text-align-center">
              <div class="sparkline display-inline" data-sparkline-type='pie'
                   data-sparkline-piecolor='["#E979BB", "#57889C"]'
                   data-sparkline-offset="90" data-sparkline-piesize="23px">
                22,88
              </div>
              <div
                class="btn-group display-inline pull-right text-align-left hidden-tablet">
                <button class="btn btn-xs btn-default dropdown-toggle"
                        data-toggle="dropdown">
                  <i class="fa fa-cog fa-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-xs pull-right">
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i>
                      <u>P</u>DF</a>
                  </li>
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-times fa-lg fa-fw txt-color-red"></i>
                      <u>D</u>elete</a>
                  </li>
                  <li class="divider"></li>
                  <li class="text-align-center">
                    <a (click)="(null)">Cancel</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td><a (click)="(null)">India</a></td>
            <td>3,671</td>
            <td class="text-align-center">
              <div class="sparkline txt-color-blue text-align-center"
                   data-sparkline-height="22px" data-sparkline-width="90px"
                   data-sparkline-barwidth="2">
                3631, 1471, 2400, 3631, 471, 1300, 1177, 2500, 2577, 3000, 4100,
                3000, 7700
              </div>
            </td>
            <td class="text-align-center">373</td>
            <td class="text-align-center">
              <div class="sparkline display-inline" data-sparkline-type='pie'
                   data-sparkline-piecolor='["#E979BB", "#57889C"]'
                   data-sparkline-offset="90" data-sparkline-piesize="23px">
                10,90
              </div>
              <div
                class="btn-group display-inline pull-right text-align-left hidden-tablet">
                <button class="btn btn-xs btn-default dropdown-toggle"
                        data-toggle="dropdown">
                  <i class="fa fa-cog fa-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-xs pull-right">
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i>
                      <u>P</u>DF</a>
                  </li>
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-times fa-lg fa-fw txt-color-red"></i>
                      <u>D</u>elete</a>
                  </li>
                  <li class="divider"></li>
                  <li class="text-align-center">
                    <a (click)="(null)">Cancel</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td><a (click)="(null)">Brazil</a></td>
            <td>2,476</td>
            <td class="text-align-center">
              <div class="sparkline txt-color-blue text-align-center"
                   data-sparkline-height="22px" data-sparkline-width="90px"
                   data-sparkline-barwidth="2">
                2700, 1877, 2500, 2577, 2000, 3631, 2471, -2700, -3631, 2471,
                1300, 2100, 3000,
              </div>
            </td>
            <td class="text-align-center">741</td>
            <td class="text-align-center">
              <div class="sparkline display-inline" data-sparkline-type='pie'
                   data-sparkline-piecolor='["#E979BB", "#57889C"]'
                   data-sparkline-offset="90" data-sparkline-piesize="23px">
                34,66
              </div>
              <div
                class="btn-group display-inline pull-right text-align-left hidden-tablet">
                <button class="btn btn-xs btn-default dropdown-toggle"
                        data-toggle="dropdown">
                  <i class="fa fa-cog fa-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-xs pull-right">
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i>
                      <u>P</u>DF</a>
                  </li>
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-times fa-lg fa-fw txt-color-red"></i>
                      <u>D</u>elete</a>
                  </li>
                  <li class="divider"></li>
                  <li class="text-align-center">
                    <a (click)="(null)">Cancel</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td><a (click)="(null)">Turkey</a></td>
            <td>1,476</td>
            <td class="text-align-center">
              <div class="sparkline txt-color-blue text-align-center"
                   data-sparkline-height="22px" data-sparkline-width="90px"
                   data-sparkline-barwidth="2">
                1300, 1877, 2500, 2577, 2000, 2100, 3000, -2471, -2700, -3631,
                -2471, 2700, 3631
              </div>
            </td>
            <td class="text-align-center">123</td>
            <td class="text-align-center">
              <div class="sparkline display-inline" data-sparkline-type='pie'
                   data-sparkline-piecolor='["#E979BB", "#57889C"]'
                   data-sparkline-offset="90" data-sparkline-piesize="23px">
                75,25
              </div>
              <div
                class="btn-group display-inline pull-right text-align-left hidden-tablet">
                <button class="btn btn-xs btn-default dropdown-toggle"
                        data-toggle="dropdown">
                  <i class="fa fa-cog fa-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-xs pull-right">
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i>
                      <u>P</u>DF</a>
                  </li>
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-times fa-lg fa-fw txt-color-red"></i>
                      <u>D</u>elete</a>
                  </li>
                  <li class="divider"></li>
                  <li class="text-align-center">
                    <a (click)="(null)">Cancel</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td><a (click)="(null)">Canada</a></td>
            <td>146</td>
            <td class="text-align-center">
              <div class="sparkline txt-color-orange text-align-center"
                   data-sparkline-height="22px"
                   data-sparkline-width="90px" data-sparkline-barwidth="2">
                5, 34, 10, 1, 4, 6, -9, -1, 0, 0, 5, 6, 7
              </div>
            </td>
            <td class="text-align-center">23</td>
            <td class="text-align-center">
              <div class="sparkline display-inline" data-sparkline-type='pie'
                   data-sparkline-piecolor='["#E979BB", "#57889C"]'
                   data-sparkline-offset="90" data-sparkline-piesize="23px">
                50,50
              </div>
              <div
                class="btn-group display-inline pull-right text-align-left hidden-tablet">
                <button class="btn btn-xs btn-default dropdown-toggle"
                        data-toggle="dropdown">
                  <i class="fa fa-cog fa-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-xs pull-right">
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i>
                      <u>P</u>DF</a>
                  </li>
                  <li>
                    <a (click)="(null)"><i
                      class="fa fa-times fa-lg fa-fw txt-color-red"></i>
                      <u>D</u>elete</a>
                  </li>
                  <li class="divider"></li>
                  <li class="text-align-center">
                    <a (click)="(null)">Cancel</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <td colspan="5">
              <ul class="pagination pagination-xs no-margin">
                <li class="prev disabled">
                  <a (click)="(null)">Previous</a>
                </li>
                <li class="active">
                  <a (click)="(null)">1</a>
                </li>
                <li>
                  <a (click)="(null)">2</a>
                </li>
                <li>
                  <a (click)="(null)">3</a>
                </li>
                <li class="next">
                  <a (click)="(null)">Next</a>
                </li>
              </ul>
            </td>
          </tr>
          </tfoot>
        </table>


    </div>

  </div>
</sa-widget>
